<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>店铺余额</span>
        </div>
      </template>
      <div class="balance-info">
        <div class="balance-item">
          <div class="balance-label">账户余额</div>
          <div class="balance-amount">¥ {{ data.balance }}</div>
        </div>
        <div class="balance-item">
          <div class="balance-label">冻结金额</div>
          <div class="balance-amount">¥ {{ data.frozenBalance }}</div>
        </div>
        <div class="balance-item">
          <div class="balance-label">可提现金额</div>
          <div class="balance-amount">¥ {{ data.availableBalance }}</div>
        </div>
      </div>
      
      <div style="margin-top: 30px;">
        <el-button type="primary" @click="handleWithdraw">提现</el-button>
        <el-button type="success" @click="handleRecharge">充值</el-button>
      </div>
    </el-card>

    <!-- 提现对话框 -->
    <el-dialog title="提现" width="40%" v-model="data.withdrawVisible" :close-on-click-modal="false">
      <el-form :model="data.withdrawForm" label-width="100px" style="padding-right: 50px">
        <el-form-item label="提现金额" prop="amount">
          <el-input v-model="data.withdrawForm.amount" autocomplete="off" />
        </el-form-item>
        <el-form-item label="提现方式" prop="method">
          <el-select v-model="data.withdrawForm.method" placeholder="请选择提现方式">
            <el-option label="银行卡" value="bank"></el-option>
            <el-option label="支付宝" value="alipay"></el-option>
            <el-option label="微信" value="wechat"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账户信息" prop="account">
          <el-input v-model="data.withdrawForm.account" autocomplete="off" placeholder="请输入账户信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.withdrawVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitWithdraw">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 充值对话框 -->
    <el-dialog title="充值" width="40%" v-model="data.rechargeVisible" :close-on-click-modal="false">
      <el-form :model="data.rechargeForm" label-width="100px" style="padding-right: 50px">
        <el-form-item label="充值金额" prop="amount">
          <el-input v-model="data.rechargeForm.amount" autocomplete="off" />
        </el-form-item>
        <el-form-item label="充值方式" prop="method">
          <el-select v-model="data.rechargeForm.method" placeholder="请选择充值方式">
            <el-option label="银行卡" value="bank"></el-option>
            <el-option label="支付宝" value="alipay"></el-option>
            <el-option label="微信" value="wechat"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.rechargeVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitRecharge">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getMerchantBalance } from "@/api";

const data = reactive({
  balance: 0.00,
  frozenBalance: 0.00,
  availableBalance: 0.00,
  pageNum: 1,
  pageSize: 10,
  total: 0,  // 总条数
  withdrawVisible: false,
  rechargeVisible: false,
  withdrawForm: {},
  rechargeForm: {},
})

// 页面加载时获取商家余额信息
onMounted(() => {
  fetchMerchantBalance();
});

const fetchMerchantBalance = async () => {
  try {
    const res = await getMerchantBalance();
    if (res.code === 200) {
      // 更新商家余额信息
      data.balance = res.data.balance.toFixed(2);
      data.availableBalance = res.data.balance.toFixed(2);
      // 冻结金额暂时设置为0，后续可根据业务需求调整
      data.frozenBalance = "0.00";
    } else {
      ElMessage.error(res.message || "获取余额信息失败");
    }
  } catch (error) {
    console.error("获取余额信息失败:", error);
    ElMessage.error("获取余额信息失败");
  }
};

const handleWithdraw = () => {
  data.withdrawForm = {}
  data.withdrawVisible = true
}

const handleRecharge = () => {
  data.rechargeForm = {}
  data.rechargeVisible = true
}

const submitWithdraw = () => {
  // 这里需要替换为实际的提现接口
  ElMessage.success('提现申请已提交')
  data.withdrawVisible = false
}

const submitRecharge = () => {
  // 这里需要替换为实际的充值接口
  ElMessage.success('充值申请已提交')
  data.rechargeVisible = false
}

</script>

<style scoped>
.balance-info {
  display: flex;
  justify-content: space-between;
  padding: 30px;
  text-align: center;
}

.balance-item {
  flex: 1;
}

.balance-label {
  font-size: 18px;
  color: #666;
  margin-bottom: 15px;
}

.balance-amount {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

.card-header {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
}
</style>